<template>
  <div class="management-container">
    <!-- <permission-search-form v-on:update:search="searchChangeHandler"/> -->
    <div class="management-content">
      <div class="button-box clearfix">
        <el-button type="primary" icon="el-icon-plus" @click="goToAddRole"> {{ $t('permission.addPermission') }} </el-button>
      </div>
      <role-table :table-data="tableData" :total="total" :listLoading="isListLoading" v-on:update:search="searchChangeHandler"></role-table>
    </div>
  </div>
</template>

<script>
  import { default as roleTable } from "./roleTable//index";
  // import { default as permissionSearchForm } from "./permissionSearchForm//index";

  export default {
    name: "RoleManagement",
    components: {
      roleTable,
      // permissionSearchForm
    },
    data() {
      return {
        tableData: [],
        total: 0,
        // 搜索条件
        searchCondition: {
          page: 1,
          limit: 10
        },
        // 用户列表是否加载中的标志位
        isListLoading: false
      }
    },
    created: function () {
      this.init()
    },
    methods: {
      // 组件初始化方法
      init() {
        this.getRoleList()
      },
      searchChangeHandler: function(search) {
        // search 是子组件传来的值
        // console.log("searchChangeHandler, search = ", search);
        this.searchCondition = Object.assign(this.searchCondition, search);
        // console.log("searchCondition = ", this.searchCondition);

        this.getRoleList()
      },
      // 根据条件查询角色列表
      getRoleList: function() {
        this.isListLoading = true;
        this.$store
          .dispatch('getRoleList', this.searchCondition)
          .then(data => {
            this.isListLoading = false;
            if (data['code'] === 0) {
              this.tableData = data['data']['data'];
              this.total = data["data"]["total"] || 0;
            }
          })
          .catch((error) => {
            console.error('get role list has error:', error)
            this.isListLoading = false;
          })
      },
      /** 跳转到添加权限 */
      goToAddRole() {
        this.$router.push({ path: 'addRole' })
      },
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import '../styles/management-public.scss';
</style>
